<template>
  <div id="box">
    <div id="header">
      <div></div>
      <span>主题收藏</span>
      <router-link to="/home/login"><van-icon name="arrow-left" /></router-link>
    </div>
    <div id="bodyer">
      <nav class="lis" v-for="(v, k) in lis" :key="k">
        <div><img :src="v.author.avatar_url" alt="" /></div>
        <nav>
          <span>{{ v.author.loginname }}</span>
          <p>{{ v.content }}</p>
        </nav>
        <span>{{ date(v.last_reply_at).locale("zh-cn").fromNow() }}</span>
      </nav>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/zh-cn";
dayjs.extend(relativeTime);
export default {
  data() {
    return {
      lis: [],
      date: "",
    };
  },
  created() {
    let d = JSON.parse(window.localStorage.getItem("user"));
    this.axios("https://cnodejs.org/api/v1/topic_collect/" + d.loginname).then(
      (res) => {
        this.lis = res.data.data;
        console.log(this.lis);
      }
    );

    this.date = dayjs;
  },
};
</script>
<style lang="scss" scoped>
#box {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f1f1f1;
  > #header {
    height: 0.5rem;
    width: 100%;
    background-image: linear-gradient(to right top, #e9028d, #6937b5);
    position: relative;
    > span {
      font-size: 0.18rem;
      color: white;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0.1rem;
    }
    > div {
      height: 0.5rem;
    }
    > a {
      font-size: 0.2rem;
      color: #fff;
      position: absolute;
      left: 0.04rem;
      bottom: 0.08rem;
    }
  }
  > #bodyer {
    flex-grow: 1;
    overflow: auto;
    box-sizing: border-box;
    width: 100%;
  }
}
.lis {
  min-height: 0.4rem;
  width: 100%;
  margin: 0rem 0px 0.08rem;
  display: flex;
  position: relative;
  box-sizing: border-box;
  padding: 0.08rem 0.1rem;
  background: white;
  > div {
    width: 0.4rem;
    height: 0.4rem;
    background: #aaa;
    border-radius: 0.06rem;
    overflow: hidden;
    > img {
      width: 100%;
    }
  }
  > span {
    position: absolute;
    right: 0.1rem;
    top: 0.08rem;
    font-size: 0.12rem;
    color: #aaa;
  }
  > nav {
    margin-left: 0.1rem;
    width: 3.05rem;
    display: flex;
    flex-wrap: wrap;
    > span {
      height: 0.2rem;
      line-height: 0.2rem;
      font-size: 0.16rem;
      color: #8799a3;
    }
    > p {
      color: #aaaaaa;
      width: 100%;
      height: 0.2rem;
      line-height: 0.2rem;
      font-size: 0.14rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>